<template>
  <div id="modules-blog-create">
    <div class="create-header">
      <el-row :gutter="20">
        <el-col :span="3" class="blog-manage" @click.native="goManage">
          <icon-svg class="icon" name="leftArrow"></icon-svg>
          <span>文章管理</span>
        </el-col>
        <el-col :span="16" class="blog-title">
          <el-input
            v-model="articleObj.title"
            placeholder="请输入标题"
            maxlength="100"
            minlength="5"
            show-word-limit
          ></el-input>
        </el-col>
        <el-col :span="3" class="blog-public">
          <el-button @click="publicBlog">发布文章</el-button>
        </el-col>
      </el-row>
    </div>
    <div id="vditor"></div>
    <puclic-dialog @changeShowSuccess="changeShowSuccess" ref="public-dialog" />
    <public-item
      v-if="showSuccess"
      :articleObj="articleObj"
      @changeShowSuccess="changeShowSuccess"
      ref="public-success-item"
    />
  </div>
</template>

<script>
import puclicDialog from './create-public-dialog.vue'
import publicItem from './create-public-success-item.vue'

import highlightCode from '@/plugins/vditor-highlight.js'
export default {
  components: {
    puclicDialog,
    publicItem
  },
  data() {
    return {
      vditor: null,
      uploadUrl: window.INIT_CONFIG['baseUrl'] + '/upLoad',
      articleObj: {
        id: undefined,
        title: '',
        contentEditor: ''
      },
      showSuccess: false
    }
  },
  mounted() {
    this.renderBlog()
  },
  methods: {
    renderBlog() {
      const height = document.body.offsetHeight - 56
      this.vditor = new this.$vditor('vditor', {
        height: height,
        toolbarConfig: {
          pin: true
        },
        cache: {
          enable: false
        },
        upload: {
          accept: 'image/*',
          multiple: false,
          withCredentials: true,
          url: this.uploadUrl,
          // 拖拽上传
          linkToImgUrl: this.uploadUrl,
          filename(name) {
            return name
              .replace(/[^(a-zA-Z0-9\u4e00-\u9fa5.)]/g, '')
              .replace(/[?\\/:|<>*[\]()$%{}@~]/g, '')
              .replace('/\\s/g', '')
          }
        },
        //   分屏模式
        mode: 'sv',
        // preview: {
        //   hljs: {
        //     enable: true,
        //     style: 'arduino',
        //     lineNumber: true
        //   }
        // },
        after: () => {
          // 初始化设置内容设置为空，如何创建文章的话就设置为空，修改文章的话需要设置成文章内容
          if (this.$route.query.articleId) {
            this.articleObj.id = this.$route.query.articleId
            this.getData()
          }
        }
      })
      highlightCode()
    },
    getToken() {
      return window.localStorage.getItem('token')
    },
    goManage() {
      this.$router.push({ name: 'manage-edit-content' })
    },
    changeShowSuccess({ show, data }) {
      this.showSuccess = show
      this.articleObj = data || this.articleObj
    },
    publicBlog() {
      const titleLength = this.articleObj.title.trim().length
      if (titleLength < 4 || titleLength > 100) {
        this.$message({ message: '标题长度应该在4~100之间' })
        return
      }
      if (this.vditor.getValue().trim().length <= 0) {
        this.$message({ message: '内容不能为空' })
        return
      }

      this.articleObj.contentEditor = this.vditor.getValue()
      if (this.articleObj.id) {
        this.$refs['public-dialog'].showDialog({ dialogType: 'edit', data: this.articleObj })
      } else {
        this.$refs['public-dialog'].showDialog({ dialogType: 'add', data: this.articleObj })
      }
    },
    // 编辑文章才会请求这个
    getData() {
      this.$ajax({
        url: this.$ajax.setUrl(`/article/${this.articleObj.id}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.articleObj = data.data.curArticle
          // 设置内容
          this.vditor.setValue(this.articleObj.contentEditor || '')
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#modules-blog-create {
  min-width: 1000px;
  margin-top: -30px;
  .create-header {
    height: 56px;
    background: #f3f3f3;
    width: 100%;
    overflow: hidden;
    .el-row {
      height: 56px;
      line-height: 56px;
    }
    .blog-manage {
      font-size: 18px;
      color: #333;
      cursor: pointer;
      .icon {
        margin-right: 10px;
        height: 56px;
        line-height: 56px;
      }
    }
    .blog-title {
      font-size: 18px;
      color: rgb(34, 34, 34);
    }
    .blog-public {
      font-size: 18px;
      color: #fff;
    }
  }
}
</style>
